<template>
  <div class="order">
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
    <van-tabs v-model="active" sticky>
      <van-tab name="all" title="全部"></van-tab>
      <van-tab name="payment" title="待支付"></van-tab>
      <van-tab name="delivery" title="待发货"></van-tab>
      <van-tab name="received" title="待收货"></van-tab>
      <van-tab name="comment" title="待评价"></van-tab>
    </van-tabs>

    <OrderListItem v-for="item in list" :key="item.order_id" :item="item"></OrderListItem>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import OrderListItem from '@/components/OrderListItem.vue'

export default {
  name: 'MyOrderIndex',
  data () {
    return {
      active: this.$route.query.dataType || 'all'
    }
  },
  components: {
    OrderListItem
  },
  computed: {
    ...mapGetters('order', ['list'])
  },
  methods: {
    ...mapActions('order', ['getOrderList'])
  },
  created () {
    // 查询订单详情
    this.getOrderList('all')
  },
  watch: {
    active: {
      immediate: true,
      handler () {
        this.getOrderList(this.active)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.order {
  background-color: #fafafa;
}
.van-tabs {
  position: sticky;
  top: 0;
}
</style>
